<template>
  <div class="goods">
    <good-nav />
    <good-swiper :banners="banners" />
    <good-content :content="content"/>
    <good-tab 
    @addCart="addToCart" 
    @handleCollect="addCollect" 
    :user="user"
    :content="content"
    />
    <toast ref="toast"/>
  </div>
</template>

<script>
import Toast from '../../../components/Toast/Toast.vue';
import GoodContent from './GoodContent.vue';
import GoodNav from "./GoodNav.vue";
import GoodSwiper from "./GoodSwiper.vue";
import GoodTab from './GoodTab.vue';

export default {
  components: { GoodSwiper, GoodNav, GoodContent, GoodTab, Toast },
  name: "Good",
  data() {
    return {
      banners: [],
      content:{},
      user:{}
    };
  },
  computed: {
    _id(){return this.$store.getters.user._id},
    gid(){return this.$route.params.gid},
  },
  created() {
    this.get_info()
  },
  methods: {
    get_info() {//获取商品详情
      let gid = this.$route.params.gid
      // console.log(gid);
      this.$axios({
        url: "mall/detail",
        params: {
          gid: gid
        }
      }).then(res => {
        this.banners = res.data.banners;
        this.content = {
          address:res.data.address,
          goodinfo:res.data.goodinfo,
          price:res.data.price,
          goodname:res.data.goodname,
          collections:res.data.collections
        }
        this.user=res.data.user
      });
    },
    addCollect(){
      let data = {
        uid : this._id,
        gid : this.gid,
      }
      this.$axios({
        url:'/mall/collect',
        method:'post',
        data:data
      }).then(res=>{
        console.log(res)
      })
      console.log('收藏')
    },
    addToCart(){//加入购物车
      let data = {
        gid:this.gid,
        content:this.content,
        img:this.banners[0],
        user:this.user,
        isCheck:false
      }
      this.$store.dispatch('AddToCart',data)
      let msg = '添加购物车成功'
      let color = 'MediumSpringGreen'
      this.$refs.toast.show(msg,color)
    }
  },
  destroyed(){
    // console.log('被销毁')
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.goods{
  padding-top: 44px;
  overflow: hidden;
  padding-bottom: 44px;
}
.goods img {
  width: 100%;
}
</style>
